<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        h3 {
            padding: 20px 10px;
        }

        li {
            list-style: none;
        }

        .list li {
            line-height: 45px;
            text-indent: 10px;
            border: 1px solid #333;
        }

        .buttonGroup {
            margin-top: 20px;
        }

        .active {
            background-color: #6ff;
        }
    </style>
</head>

<body>
    <div id="demo" class="wrap">
        <h3 id="title">批量操作元素</h3>
        <ul class="list">
            <li class="first">01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li class="last"><span>06</span></li>
        </ul>
    </div>
</body>
<script>
    // $(".first").click(function () {
    //     alert($(this).index());
    // })

    // $(".first").on("click", function () {
    //     $(this).css({ background: "red" });
    // })

    // 事件委托 => on,off()
    // 利用事件冒泡的原理 把子元素的事件委托给父代元素 由父代元素代为执行

    // 老版本
    // $(".wrap").click(function (e) {
    //     // console.log(e);
    //     console.log(e.currentTarget)
    //     var target = e.target;
    //     if ($(target).is(".first")) {
    //         console.log("点击了first");
    //     } else if ($(target).is("#title")) {
    //         console.log("点击了h3");
    //     }
    // })


    //  on()  添加事件监听(委托版)
    // $(parent).on(eventType,ele,data,callback)
    // parent     被委托事件的父元素(页面中已存在的)
    // ele        委托事件的子代元素
    // eventType  绑定事件的类型
    // data       (可选参数)当一个事件被触发时要传递event.data给事件处理函数。
    // callback   事件触发时的回调函数

    // 

    function firstClickHandler() {
        console.log("点击了first");
    }
    function headerThreeeClickHandler() {
        console.log("点击了h3");
    }

    // .wrap .first
    // $(".wrap").on("click", ".first", firstClickHandler);
    // $(".wrap").on("click", "#title", headerThreeeClickHandler);
    $(document).on("click", ".wrap .first", firstClickHandler);
    $(document).on("click", ".wrap #title", headerThreeeClickHandler);


    // off()  删除事件监听(委托版)
    // $(parent).off(eventType,ele,callback)
    // parent     被委托事件的父元素(页面中已存在的)
    // ele        委托事件的子代元素
    // eventType  绑定事件的类型
    // callback   事件触发时的回调函数

    // $(".wrap").off("click", ".first", firstClickHandler);
    // $(".wrap").off("click", "#title", headerThreeeClickHandler);

    // $(".wrap").off("click");
    // $(".wrap").off();





</script>

</html>